Common buttons 常用按鈕

五種按鈕型別:懸浮(Elevated)、填充(Filled)、色調填充(Filled Tonal)、描邊(Outlined)、文字(Text)
Elevated Button 懸浮按鈕
- 中等優先順序操作,比填充按鈕(Filled Button)視覺強排程略低。
- 適用於強調次要操作,比如“儲存草稿”或“稍後提醒”。
- 提供更溫和的視覺吸引力,與其他按鈕搭配使用時,不會喧賓奪主。



| 屬性 | 值 |
| 高度 | 40dp |
| 形狀 | 20dp 圓角 |
| 圖示尺寸 | 18dp |
| 左右內邊距 | 24dp |
| 帶圖示的左側內邊距 | 16dp |
| 帶圖示的右側內邊距 | 24dp |
| 元素間距 | 8dp |
| 標籤對齊方式 | 居中 |
Filled button填充按鈕
- 高優先順序操作,用於主要按鈕或最終確認按鈕(如“提交”、“儲存”)。
- 適用於強烈引導使用者互動的操作,視覺對比度高。
- 在一組按鈕中,填充按鈕通常是最突出的,應用於主要操作,其他次要操作可使用較低強排程的按鈕(如色調按鈕或文字按鈕)。



| 屬性 | 值 |
| 高度 | 40dp |
| 形狀 | 20dp 圓角 |
| 圖示尺寸 | 18dp |
| 左右內邊距 | 24dp |
| 帶圖示的左側內邊距 | 16dp |
| 帶圖示的右側內邊距 | 24dp |
| 元素間距 | 8dp |
| 標籤對齊方式 | 居中 |
Filled Tonal Button 填充色調按鈕
- 適用於次要操作,提供視覺吸引力的同時不過分強調。
- 在同一介面上,填充色調按鈕可作為填充按鈕(Filled Button)的補充,用於不太關鍵但仍然重要的操作。
- 適用於背景顏色較淺的介面,增強對比度,使文字清晰可見。



| 屬性 | 值 |
| 高度 | 40dp |
| 形狀 | 20dp 圓角 |
| 圖示尺寸 | 18dp |
| 左右內邊距 | 24dp |
| 帶圖示的左側內邊距 | 16dp |
| 帶圖示的右側內邊距 | 24dp |
| 元素間距 | 8dp |
| 標籤文字對齊方式 | 居中 |
Outlined Button 輪廓按鈕
- 適用於次要操作,比填充按鈕(Filled Button)和色調填充按鈕(Tonal Button)視覺上更輕,但仍提供足夠的可互動性。
- 適用於背景色較淺的介面,保持視覺清晰度。
- 可用於強調但不搶佔焦點的操作,例如“取消”、“返回”或“檢視詳情”按鈕。



| 屬性 | 值 |
| 高度 | 40dp |
| 形狀 | 20dp 圓角 |
| 圖示尺寸 | 18dp |
| 左右內邊距 | 24dp |
| 帶圖示的左側內邊距 | 16dp |
| 帶圖示的右側內邊距 | 24dp |
| 元素間距 | 8dp |
| 標籤文字對齊方式 | 居中 |
Text Button 文字按鈕
- 適用於次要或補充操作,例如“取消”、“跳過”或“瞭解更多”按鈕。
- 適用於背景色較淺的介面,保持視覺清晰度。
- 可用於強調但不搶佔焦點的操作,相比輪廓按鈕(Outlined Button)視覺更輕。



| 屬性 | 值 |
| 高度 | 40dp |
| 形狀 | 20dp 圓角 |
| 圖示尺寸 | 18dp |
| 左右內邊距 | 12dp |
| 帶圖示的左側內邊距 | 12dp |
| 帶圖示的右側內邊距 | 16dp |
| 元素間距 | 8dp |
| 標籤文字對齊方式 | 居中 |

